<template>
    <a-form :form="form" @submit="onFormSubmit">
        <a-form-item label="应用名称"
                     :label-col="{ span : 5 }"
                     :wrapper-col="{ span : 19 }">
            <a-input placeholder="请输入" autocomplete="off"
                     v-decorator="[
                        'appName',
                        {
                            rules: [
                                { required: true, message: '请输入应用名称' },
                                { pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,20}$/, message: '由2~20个字母、数字、中文和下划线组成' },
                            ]
                         }
                     ]"
            />
        </a-form-item>
        <a-form-item label="应用图标"
                     :label-col="{ span : 5 }"
                     :wrapper-col="{ span : 19 }">
            <a-input placeholder="请输入" autocomplete="off"
                     v-decorator="[
                        'appLogo',
                        {
                            rules: [
                                { required: true, message: '请输入应用图标地址' },
                                { pattern: /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i, message: '请输入正确的地址' }
                            ]
                        }
                     ]"
            />
        </a-form-item>
        <a-form-item label="授权回调域"
                     :label-col="{ span : 5 }"
                     :wrapper-col="{ span : 19 }">
            <a-input placeholder="请输入" autocomplete="off"
                     v-decorator="[
                        'callback',
                        {
                            rules: [
                                { required: true, message: '请输入授权回调域地址' },
                                { pattern: /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i, message: '请输入正确的地址' }
                            ]
                        }
                     ]"
            />
        </a-form-item>
        <a-form-item label="应用描述" :label-col="{ span : 5 }" :wrapper-col="{ span : 19 }">
            <a-textarea placeholder="请输入" autocomplete="off" v-decorator="[ 'appDesc' ]" />
        </a-form-item>

        <a-button type="primary" html-type="submit" block>提交</a-button>
    </a-form>
</template>

<script>
    import { addOauthClient } from '../../apis/index';
    export default {
        data(){
            return {
                form : this.$form.createForm(this),
            };
        },
        methods : {
            onFormSubmit : function(e) {
                e.preventDefault();
                let $this = this;
                $this.form.validateFields((err, params) => {
                   if (!err){
                       addOauthClient(params).then(() => {
                           $this.$message.success("保存成功");
                           this.$router.push({ name : 'dashboard', query : { reload : new Date().getTime().toString() } }).then();
                       });
                   }
                });
            }
        }
    };
</script>
